<template>
  <view class="main-pd u-m-t-28">
    <view>
      <HeadTitle title="待缴账单" />
      <view class="u-card jf-msg" v-for="item in djzd" :key="item.id">
        <view class="u-flex">
          <view class="u-flex u-flex-grow">
            <view>姓&emsp;&emsp;名：</view>
            <view>{{ item.yzName || "" }}</view>
          </view>
          <view class="u-flex u-flex-grow">
            <view>费用类型：</view>
            <view>物业费</view>
          </view>
        </view>
        <view class="u-flex">
          <view class="u-flex u-flex-grow">
            <view>使用方式：</view>
            <view>{{ item.syfs || "" }}</view>
          </view>
          <view class="u-flex u-flex-grow">
            <view>应缴金额：</view>
            <view>{{ item.orderMoney && item.orderMoney.toFixed(2) }}元</view>
          </view>
        </view>
        <view class="u-flex">
          <view class="u-flex u-flex-grow">
            <view>单&emsp;&emsp;价：</view>
            <view> {{ item.unitPrice || "" }}元</view>
          </view>
        </view>
        <view class="u-flex">
          <view class="u-flex u-flex-grow">
            <view>位&emsp;&emsp;置：</view>
            <view> {{ item.position || "" }}</view>
          </view>
        </view>
        <view class="u-flex">
          <view class="u-flex u-flex-grow">
            <view class="label">服务时间：</view>
            <view>{{ item.fwStartDate || "" }} 至 {{ item.fwEndDate }}</view>
          </view>
        </view>
        <view class="u-flex">
          <view class="u-flex u-flex-grow">
            <view class="label">缴费时间：</view>
            <view>{{ item.jfStartTime || "" }} 至 {{ item.jfEndTime }}</view>
          </view>
        </view>
        <view class="u-m-t-40">
          <u-button
            text="去缴费"
            color="linear-gradient(90deg, #FA827D 0%, #F34B47 100%)"
            :customStyle="{
              fontSize: '28rpx',
              height: '72rpx',
            }"
            @click="goPay(item.id)"></u-button>
        </view>
      </view>
      <view class="u-m-t-32">
        <HeadTitle title="缴费记录" />
        <view
          class="u-card jf-msg u-m-t-20"
          v-for="item in yjzd"
          :key="item.id">
          <view class="u-flex">
            <view class="u-flex u-flex-grow">
              <view>姓&emsp;&emsp;名：</view>
              <view>{{ item.yzName }}</view>
            </view>
            <view class="u-flex u-flex-grow">
              <view>费用类型：</view>
              <view>{{ item.type }}</view>
            </view>
          </view>
          <view class="u-flex">
            <view class="u-flex u-flex-grow">
              <view>房屋面积：</view>
              <view>{{ item.fwmj }}平</view>
            </view>
            <view class="u-flex u-flex-grow">
              <view>应缴金额：</view>
              <view>{{ item.orderMoney }}元</view>
            </view>
          </view>
          <view class="u-flex">
            <view class="u-flex u-flex-grow">
              <view>单&emsp;&emsp;价：</view>
              <view> {{ item.unitPrice || "" }}元</view>
            </view>
          </view>
          <view class="u-flex">
            <view class="u-flex u-flex-grow">
              <view>位&emsp;&emsp;置：</view>
              <view>{{ item.position }}</view>
            </view>
          </view>
          <view class="u-flex">
            <view class="u-flex u-flex-grow">
              <view class="label">服务时间：</view>
              <view>{{ item.fwStartDate }} 至 {{ item.fwEndDate }}</view>
            </view>
          </view>
          <view class="u-flex">
            <view class="u-flex u-flex-grow">
              <view class="label">缴费时间：</view>
              <view>{{ item.jfStartTime }} 至 {{ item.jfEndTime }}</view>
            </view>
          </view>
          <view class="u-flex">
            <view class="u-flex u-flex-grow">
              <view class="w-150">缴费状态：</view>
              <view>{{ item.isPay == 1 ? "已缴费" : "未缴费" }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import HeadTitle from "@/components/HeadTitle.vue";
import { getdjzdListApi, payApi, getwyjfListApi } from "@/api/index";
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import useInfoStore from "@/store/user";
const userStore = useInfoStore();
let djzd = ref([]);
let yjzd = ref([]);
const getdjzdListHandle = () => {
  getdjzdListApi({
    dzyzkId: userStore.dzyzkId,
  }).then((res) => {
    if (res.success) {
      djzd.value = res.data;
    }
  });
};
/* 
去支付
*/
const goPay = (id) => {
  payApi({
    id,
    openId: userStore.openId,
  }).then((res) => {
    if (res.success) {
      let resData = res.data;
      wx.requestPayment({
        timeStamp: resData.timeStamp, //后端返回的时间戳
        nonceStr: resData.nonceStr, //后端返回的随机字符串
        package: resData.package, //后端返回的prepay_id
        signType: resData.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
        paySign: resData.paySign, //后端返回的签名
        success(res) {
          if (res.errMsg == "requestPayment:fail cancel") {
            uni.$u.toast("用户取消支付");
            return false;
          }
          getdjzdListHandle();
          getwyjfListHandle();
        },
        fail(res) {
          //
          uni.$u.toast("支付失败");
        },
      });
    } else {
      uni.$u.toast(res.msg);
      return false;
    }
  });
};
/*
 * 获取缴费记录
 */
const getwyjfListHandle = () => {
  getwyjfListApi({
    dzyzkId: userStore.dzyzkId,
  }).then((res) => {
    yjzd.value = res.data;
  });
};
onLoad(() => {
  getdjzdListHandle();
  getwyjfListHandle();
});
</script>

<style lang="scss" scoped>
.jf-msg {
  font-size: 28rpx;
  color: #595959;
  margin-bottom: 20rpx;
  .u-flex.u-flex-grow {
    margin-bottom: 16rpx;
  }
}
.label {
  width: 180rpx;
}
</style>
